<template>
	<view>
		<view v-if="dataList.length" class="container">
			<view class="wrap">
				<view class="card-list">
					<view v-for="(file, file_i) in dataList" :key="file_i" class="box-card">
						<view class="header">
							<view class="flex_1 m-r-10 text_ellipsis">{{ file.name }}</view>
						</view>
						<view class="file">
							<view class="file-preview" @click="handlePictureCardPreview(file)">
								<image v-if="getMainFileType(file) == 'video'" src="/static/h5/video.png"
									mode="scaleToFill">
								</image>
								<image v-else-if="getMainFileType(file) == 'pdf'" src="/static/h5/pdf.png"
									mode="scaleToFill" />
								<image v-else-if="getMainFileType(file) == 'image'" :src="file.url"
									mode="scaleToFill" />
								<template v-else-if="file.url && file.url.slice(0, 4) != 'blob'">
									<view style="height: 100%;" flex="main:center cross:center">无法识别的文件类型</view>
								</template>
								<!-- <view class="mask">{{ getMainFileType(file) }}</view> -->
							</view>
							<view class="form">
								<component :is="componentId" v-model="file.form" :detail="flag"></component>
							</view>
						</view>
					</view>
				</view>
			</view>
			<FileChoose ref="fileChooseRef" :showFileList="false"> </FileChoose>
		</view>

	</view>
</template>

<script>
	import {
		MODULE_DICTID,
		MODULE_DICTID_NAMES
	} from '@/const/modules/index.js'

	import ProfessionalDiagrams from '@/pagesH5/EvidenceManagement/commonents/ProfessionalDiagrams.vue'
	import Sketches from '@/pagesH5/EvidenceManagement/commonents/Sketches.vue'
	import EvidenceMaterials from '@/pagesH5/EvidenceManagement/commonents/EvidenceMaterials.vue'
	import FireScenePhotos from '@/pagesH5/EvidenceManagement/commonents/FireScenePhotos.vue'
	import VideoUploads from '@/pagesH5/EvidenceManagement/commonents/VideoUploads.vue'

	import FileChoose from '@/uni_modules/file-choose/components/file-choose/file-choose.vue'
	export default {
		components: {
			ProfessionalDiagrams,
			Sketches,
			EvidenceMaterials,
			FireScenePhotos,
			VideoUploads
		},
		props: {
			formData: {
				type: Object,
				default: () => ({})
			},
			dictId: {
				type: [String, Number],
				required: true
			},
		},
		data() {
			return {
				dataList: [],
				flag: true
			};
		},
		computed: {
			// 获取文件 type
			getMainFileType() {
				return (file) => {
					if (file.type == 'application/pdf' || file.type == 'pdf') return 'pdf'
					if (file.type && file.type.indexOf('/') != '-1') return file.type.split('/')[0]

					const fileTypeMapping = {
						jpg: 'image',
						jpeg: 'image',
						png: 'image',
						gif: 'image',
						mp4: 'video',
						mov: 'video',
						avi: 'video',
						wmv: 'video',
					}
					if (fileTypeMapping[file.type] != undefined) return fileTypeMapping[file.type]
					if ((file.url && file.url.indexOf('.') != '-1')) {
						const extension = file.url.split('.').pop().toLowerCase()

						const fileType = fileTypeMapping[extension] || '未知类型'
						return fileType
					}
					if (!file.type) return '未知类型'
					return file.type
				}
			},
			getModuleKey() {
				const active = this.dictId
				const obj = {
					[MODULE_DICTID.specialty]: 'ProfessionalDiagrams',
					[MODULE_DICTID.sketch]: 'Sketches',
					[MODULE_DICTID.evidence]: 'EvidenceMaterials',
					[MODULE_DICTID.photo]: 'FireScenePhotos',
					[MODULE_DICTID.video]: 'VideoUploads'
				}
				return obj[active]
			},
			// 初始化 子组件 下的表单
			getInitItemFormData() {
				return require(`@/pagesH5/EvidenceManagement/initForm/${this.getModuleKey}.js`).default(this)
			},
			// 动态组件id
			componentId() {
				return this.getModuleKey
			},
		},
		watch: {
			formData: {
				handler(val) {
					console.log(val);
					let list = JSON.parse(JSON.stringify(val.fileList))
					let keys = Object.keys(this.getInitItemFormData)
					this.dataList = list.map(item => {
						let form = {}
						keys.forEach(itemKey => {
							form[itemKey] = item[itemKey]
						})
						return {
							...item,
							form
						}
					})
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			handlePictureCardPreview(file) {
				this.$nextTick(() => {
					const fileChooseRef = this.$refs.fileChooseRef
					console.log(fileChooseRef);
					const {
						type,
						url
					} = file
					switch (type) {
						case 'image':
							fileChooseRef.previewImage(url)
							break;
						case 'video':
							fileChooseRef.previewVideo(url)
							break;
						case 'pdf' || 'application/pdf':
							fileChooseRef.previewPDF(url)
							break;
					}
				})

			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {

		.wrap {
			width: 100%;
		}

		.card-list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 36rpx;

			.box-card {
				flex: 0 0 calc(50% - 36rpx);

				.file {
					width: 100%;
					margin-bottom: 0px;

					.file-preview {
						position: relative;
						width: 160rpx;
						height: 160rpx;
						overflow: hidden;
						border-radius: 4px;

						image {
							width: 100%;
							height: 100%;
						}

						.mask {
							cursor: pointer;
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
						}
					}
				}
			}
		}
	}
</style>